<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击弹出</title>
    <style>
        #snackbar{
            /* width: 50px; */
            height: 50px;
            background-color: red;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
 <h2>Snackbar / Toast</h2>
<p>在屏幕底部弹出消息,作用与使用方法都与Toast类似</p>
<p>点击按钮显示提示信息，3 秒后消失</p>

<button onclick="myFunction()">显示 Snackbar</button>

<div id="snackbar">一些文本..</div>
</body>
</html>
<script>
var snackbar=document.getElementById('snackbar')
    
  setTimeout(function(){
    snackbar.style.display='none'
  },3000)

    function myFunction(){
        snackbar.style.display='block'
}

</script>